import React, { Component } from 'react';
import { NavBar, Toast } from 'antd-mobile'
import service from '../api'
import '../styles/User.scss'
class User extends Component {
    constructor(props) {
        super(props)
        this.state = {
            username: ''
        }
    }
    onChange(e) {
        this.setState({ [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value })
    }
    back() {
        this.props.history.go(-1)
    }
    async toBind() {
        var res = await service.user.user_bindusername({ username: this.state.username, userid: localStorage.getItem('userid') })
        if(res.data.code == 200){
            this.props.history.push('/index/mine')
        }

    }
    render() {
        return (
            <div className='user'>
                <div className="top">
                    <NavBar onBack={() => { this.back() }}>修改用户名</NavBar>
                </div>
                <div className="name">
                    <input type="text" placeholder='请输入用户名' name='username' value={this.state.username} onChange={(e) => { this.onChange(e) }} />
                </div>
                <div className="send">
                    <button onClick={() => { this.toBind() }}>确认</button>
                </div>
            </div>
        );
    }
}

export default User;